<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>贵阳区域图</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <META content="MSHTML 6.00.3790.4807" name=GENERATOR>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta http-equiv="x-dns-prefetch-control" content="on">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5749ce65dd16f6d8456d5183c5d1a908&plugin=AMap.MapType,AMap.ToolBar,AMap.Driving,AMap.PlaceSearch,AMap.DistrictLayer,AMap.Scale"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none
        }
        html, body{
            height: 100%;
            width: 100%;
        }
        #container {
            height: 100%;
            width: 100%;
            font-size: 14px;
            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
        }
        #query {
            height: 120px;
            line-height: 40px;
            width: 100%;
            position: fixed;
            bottom:0;
            left:0;
            right:0;
            z-index: 9999;
            background-color: #ccc;
        }
        #query .item {
            background-color: #ccc;
        }
        #query .item input {
            height: 38px;
            width: 100%;
            padding-right: 25px;
            font-family: SimHei;
            font-size: 1rem;
            color: #666;
            outline: 0;
            border: 0 none;
            text-indent: .5em;
            border-bottom: 1px solid #3d92fb;
        }
        #query .item #doMarkBtn {
            height: 38px;
            width: 100%;
        }
        .content-window-card{position:relative;box-shadow:none;bottom:0;left:0;width:auto;padding:0;border-radius:5px;overflow:hidden;}
        .info-top{padding:10px 15px;position:relative;background:#fff;border-bottom:1px solid #ebebeb;}
        .closeX{position:absolute;right:10px;top:2px;font-size:22px;cursor:pointer}
        .info-middle{padding:15px 15px;border-radius:0 0 5px 5px;}
        .info-bottom{height:12px;position:relative}
        .sharp{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #fff;position:absolute;left:50%;top:0;transform:translate(-50%,0)}
        .STYLE1 {   color: #FFFFFF;
            font-weight: bold;
            font-size: 18px;
        }
        .STYLE2 {
            color: #FF0000;
            font-weight: bold;
        }
        .STYLE3 {font-size: 12px}
    </style>
</head>
<body>


<div id="container" class="amap-container" style="position: relative; background: rgb(252, 249, 242);">
</div>


<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 10,
        center: [106.598978,26.616134], //定位到 观山湖区

        buildingAnimation: false, //楼块出现是否带动画
        //前往创建自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
    });
//mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',
    map.addControl(new AMap.MapType({
        defaultType:0 //0代表默认，1代表卫星
    }));

// 数据获取方式： http://www.guihuayun.com/maps/region.php ，ajax，然后拷贝他的 districts
    var districts =  [
      {
        "citycode": "0851",
        "adcode": "520121",
        "name": "开阳县",
        "center": "106.964716,27.057823",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520122",
        "name": "息烽县",
        "center": "106.740407,27.090479",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520113",
        "name": "白云区",
        "center": "106.623069,26.677932",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520123",
        "name": "修文县",
        "center": "106.591958,26.836048",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520181",
        "name": "清镇市",
        "center": "106.468686,26.570435",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520115",
        "name": "观山湖区",
        "center": "106.598978,26.616134",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520112",
        "name": "乌当区",
        "center": "106.75069,26.630911",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520103",
        "name": "云岩区",
        "center": "106.724394,26.604604",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520111",
        "name": "花溪区",
        "center": "106.67026,26.409817",
        "level": "district",
        "districts": [
          
        ]
      },
      {
        "citycode": "0851",
        "adcode": "520102",
        "name": "南明区",
        "center": "106.714305,26.568055",
        "level": "district",
        "districts": [
          
        ]
      }
    ]

    var adcodeArr = [];

    for(var i in districts) {
        var dist = districts[i];
        adcodeArr.push(dist.adcode);
    }
 
    var curColoridx = 0;
  
   var disProvince = new AMap.DistrictLayer.Province({
        zIndex: 11.5,
        adcode: adcodeArr,
        depth: 2,
        styles: {
            'fill': function (properties) {
                    var adcode = properties.adcode;
                    return getColorByAdcode(adcode);
                },
            'province-stroke': 'cornflowerblue',
            'city-stroke': 'rgba(255,255,255,0.7)', // 中国地级市边界
            'county-stroke': 'rgba(255,255,255,0.7)' // 中国区县边界
        }
    });

    disProvince.setMap(map);


    var getColorByAdcode = function (adcode) {
        cnt = curColoridx++ % 10;
        var rgb = "rgb(255, 246, 143)";
        if(cnt > 0) {
            rgb = "rgb(255, 246, 143)";
        } 
         if(cnt > 1) {
             rgb = "rgb(255, 48, 48)";
        } 
         if(cnt > 2) {
            rgb = "rgb(255, 222, 173)";
        } 
         if(cnt > 3) {
           rgb = "rgb(255, 110, 180)";
        } 
         if(cnt > 4) {
            rgb = "rgb(255, 140, 0)";
        } 
         if(cnt > 5) {
            rgb = "rgb(255, 127, 80)";
        } 
         if(cnt > 6) {
            
             rgb = "rgb(255, 193, 193)";
        } 
         if(cnt > 7) {
            rgb = "rgb(255, 69, 0)";
        } 
         if(cnt > 8) {
          
             rgb = "rgb(255, 228, 225)";
        } 
         if(cnt > 9) {
            rgb = "rgb(255, 51, 51);";
        }
        return rgb;
    };


</script>
</body>
</html>